<style lang="scss" scoped>
.comprehensive {
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  padding: 20px;
  background: url("~@/images/bg.png");
  background-size: 100% 100%;
  overflow-y: auto;
  &-top {
    height: 80px;
    line-height: 70px;
    background: url("~@/images/bt.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    color: #fff;
    &_left {
      text-align: center;
    }
    &_center {
      text-align: center;
      font-size: 30px;
    }
    &_right {
      text-align: center;
    }
  }
  &-nav {
    height: 50px;
    display: flex;
    margin-bottom: 10px;
    &_content {
      color: #00b4ff;
      width: 175px;
      cursor: pointer;
      line-height: 50px;
      font-size: 12px;
      text-align: center;
      background: url("~@/images/juxing.png");
      background-repeat: no-repeat;
      background-size: 100% 85%;
      background-position: center;
      margin-right: -20px;
    }
    &_trancontent {
      color: #fff;
      width: 175px;
      cursor: pointer;
      line-height: 50px;
      font-size: 12px;
      text-align: center;
      background: url("~@/images/tranjuxing.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      margin-right: -20px;
    }
  }
  &-content {
    height: calc(100% - 140px);
    min-height: 600px;
    &_top {
      height: calc(100% - (100% / 3));
      .content-box {
        height: 50%;
        min-height: 200px;
        background: url("~@/images/contentbox.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 10px;
      }
    }
    &_footer {
      height: calc(100% / 3);
      .footer-box {
        height: 100%;
        min-height: 200px;
        background: url("~@/images/contentbox.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 10px;
      }
    }
  }
  .operation-content {
    height: calc(100% - 140px);
    min-height: 600px;
    &_box {
      height: calc(100% / 3);
      .operation-box {
        height: 100%;
        min-height: 200px;
        background: url("~@/images/contentbox.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 10px;
      }
    }
  }
  .medicalQualityControl-content {
    height: calc(100% - 140px);
    min-height: 600px;
    &_box {
      height: calc(100% / 3);
      .medicalQualityControl-box {
        height: 100%;
        min-height: 200px;
        background: url("~@/images/contentbox.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 10px;
      }
    }
  }
  .firstTime-content {
    height: calc(100% - 140px);
    min-height: 600px;
    &_box {
      height: calc(100% / 3);
      .firstTime-box {
        height: 100%;
        min-height: 200px;
        background: url("~@/images/contentbox.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 10px;
      }
    }
  }
  .indent-title {
    position: absolute;
    font-size: 12px;
    line-height: 12px;
    left: 40%;
    color: #00b4ff;
  }

  .iframe {
    height: calc(100% - 140px);
    min-height: 600px;
  }
}
</style>

<template>
  <div class="comprehensive">
    <div class="comprehensive-top">
      <div
        class="comprehensive-top_left"
        style="cursor: pointer"
        @click="checkStore"
      >
        {{ checkList[checkNum].name }}
      </div>
      <div
        class="comprehensive-top_center"
        style="cursor: pointer"
        @click="skipToHome"
      >
        {{ checkList[checkNum].title }}
      </div>
      <div class="comprehensive-top_right">
        <div>{{ screenTime }}</div>
      </div>
    </div>
    <div class="comprehensive-nav">
      <template v-for="(item, index) in navList">
        <div
          v-if="item.field.includes(isStrock)"
          :key="index"
          :class="
            item.isShow
              ? 'comprehensive-nav_trancontent'
              : 'comprehensive-nav_content'
          "
          @click="clickType(item, index)"
        >
          {{ item.name }}
        </div>
      </template>
    </div>
    <div v-if="navName == 'comper'" class="comprehensive-content">
      <div class="comprehensive-content_top">
        <el-col :span="6" style="height: 100%">
          <div class="content-box">
            <patient-profile :is-strock="isStrock" />
          </div>
          <div class="content-box">
            <keyfit-technology :is-strock="isStrock" />
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%">
          <chestpain-map :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <div class="content-box">
            <case-chart :is-strock="isStrock" />
          </div>
          <div v-if="isStrock != 'trauma'" class="content-box">
            <disease-time :is-strock="isStrock" />
          </div>
          <div v-if="isStrock == 'trauma'" class="content-box">
            <disease-trauma-time is-strock="trauma" />
          </div>
        </el-col>
      </div>
      <div class="comprehensive-content_footer">
        <el-col :span="12" style="height: 100%">
          <div class="footer-box">
            <quality-indicators :is-strock="isStrock" />
          </div>
        </el-col>
        <el-col :span="6" style="height: 100%">
          <div class="footer-box">
            <real-time :is-strock="isStrock" />
          </div>
        </el-col>
        <el-col :span="6" style="height: 100%">
          <div class="footer-box">
            <medical-process :is-strock="isStrock" />
          </div>
        </el-col>
      </div>
    </div>
    <div v-if="navName == 'operation'" class="operation-content">
      <div class="operation-content_box">
        <el-col :span="6" style="height: 100%">
          <patient-chestpain class="operation-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <average-Month class="operation-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <reperfusion-measure class="operation-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <surgical-treatment class="operation-box" :is-strock="isStrock" />
        </el-col>
      </div>
      <div class="operation-content_box">
        <el-col :span="6" style="height: 100%">
          <diagnosis-type class="operation-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <hospitalization-expenses
            class="operation-box"
            :is-strock="isStrock"
          />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <monthly-trend class="operation-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <doctor-surgery class="operation-box" :is-strock="isStrock" />
        </el-col>
      </div>
      <div class="operation-content_box">
        <el-col :span="6" style="height: 100%">
          <patients-num class="operation-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <review-report class="operation-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <surgery-PCI class="operation-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <doctor-treat class="operation-box" :is-strock="isStrock" />
        </el-col>
      </div>
    </div>
    <div
      v-if="navName == 'medicalQualityControl'"
      class="medicalQualityControl-content"
    >
      <div class="medicalQualityControl-content_box">
        <el-col :span="isStrock == 'chestPain' ? 6 : 8" style="height: 100%">
          <S2FMC class="medicalQualityControl-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="isStrock == 'chestPain' ? 6 : 8" style="height: 100%">
          <FMC2ECG class="medicalQualityControl-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="isStrock == 'chestPain' ? 6 : 8" style="height: 100%">
          <reperfusion-ratio
            class="medicalQualityControl-box"
            :is-strock="isStrock"
          />
        </el-col>
        <el-col v-if="isStrock == 'chestPain'" :span="6" style="height: 100%">
          <CCU class="medicalQualityControl-box" :is-strock="isStrock" />
        </el-col>
      </div>
      <div class="medicalQualityControl-content_box">
        <el-col
          v-if="isStrock == 'stroke'"
          :span="isStrock == 'chestPain' ? 6 : 8"
          style="height: 100%"
        >
          <CCU class="medicalQualityControl-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="isStrock == 'chestPain' ? 6 : 8" style="height: 100%">
          <DIDO class="medicalQualityControl-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="isStrock == 'chestPain' ? 6 : 8" style="height: 100%">
          <D2B class="medicalQualityControl-box" :is-strock="isStrock" />
        </el-col>
        <el-col
          v-if="isStrock == 'chestPain'"
          :span="isStrock == 'chestPain' ? 6 : 8"
          style="height: 100%"
        >
          <D2B2 class="medicalQualityControl-box" />
        </el-col>
        <el-col
          v-if="isStrock == 'chestPain'"
          :span="isStrock == 'chestPain' ? 6 : 8"
          style="height: 100%"
        >
          <FMC2B class="medicalQualityControl-box" />
        </el-col>
      </div>
      <div
        v-if="isStrock == 'chestPain'"
        class="medicalQualityControl-content_box"
      >
        <el-col :span="6" style="height: 100%">
          <FMC2W class="medicalQualityControl-box" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <ECG class="medicalQualityControl-box" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <upload-ratio class="medicalQualityControl-box" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <PPCI class="medicalQualityControl-box" />
        </el-col>
      </div>
      <div
        v-if="isStrock == 'stroke'"
        class="medicalQualityControl-content_box"
      >
        <el-col :span="isStrock == 'chestPain' ? 6 : 8" style="height: 100%">
          <swallow class="medicalQualityControl-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="isStrock == 'chestPain' ? 6 : 8" style="height: 100%">
          <complication
            class="medicalQualityControl-box"
            :is-strock="isStrock"
          />
        </el-col>
        <el-col :span="isStrock == 'chestPain' ? 6 : 8" style="height: 100%">
          <mortality class="medicalQualityControl-box" :is-strock="isStrock" />
        </el-col>
      </div>
    </div>
    <div v-if="navName == 'firstTime'" class="firstTime-content">
      <div class="firstTime-content_box">
        <el-col :span="6" style="height: 100%">
          <guide-time class="firstTime-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <first-medical class="firstTime-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <D2W class="firstTime-box" :is-strock="isStrock" />
        </el-col>
        <el-col :span="6" style="height: 100%">
          <in-time class="firstTime-box" :is-strock="isStrock" />
        </el-col>
      </div>
      <div class="firstTime-content_box">
        <time-line :is-strock="isStrock" />
      </div>
      <div class="firstTime-content_box">
        <el-col :span="24" style="height: 100%">
          <indicators-average-time
            class="firstTime-box"
            :is-strock="isStrock"
          />
        </el-col>
      </div>
    </div>
    <!-- 定位信标-总览,实时地图 -->
    <div
      class="iframe"
      v-if="['generalView', 'realTimeMap'].includes(navName)"
      v-loading="loading"
      element-loading-text="正在加载页面，请稍候！"
      element-loading-background="rgba(4,43,125, 0.5)"
    >
      <iframe
        style="width: 100%; height: 100%"
        :id="'iframe' + navName"
        :src="iframeUrl"
        frameborder="no"
      ></iframe>
    </div>
    <!-- 定位信标-实时地图 -->
    <!-- <div class="iframe" v-if="navName == 'realTimeMap'">实时地图</div> -->

    <div class="indent-title">
      技术支持单位：心智医联(北京)科技有限公司(http://www.xzylink.com.cn/sy)
    </div>
  </div>
</template>

<script>
import format from "@/utils/format";
import patientProfile from "./components/patientProfile.vue";
import keyfitTechnology from "./components/keyfitTechnology.vue";
import chestpainMap from "./components/chestpainMap.vue";
import caseChart from "./components/caseChart.vue";
import diseaseTime from "./components/diseaseTime.vue";
import diseaseTraumaTime from "./components/diseaseTraumaTime.vue";
import qualityIndicators from "./components/qualityIndicators.vue";
import realTime from "./components/realTime.vue";
import medicalProcess from "./components/medicalProcess.vue";
import patientChestpain from "./components/patientChestpain.vue";
import averageMonth from "./components/averageMonth.vue";
import reperfusionMeasure from "./components/reperfusionMeasure.vue";
import surgicalTreatment from "./components/surgicalTreatment.vue";
import diagnosisType from "./components/diagnosisType.vue";
import hospitalizationExpenses from "./components/hospitalizationExpenses.vue";
import monthlyTrend from "./components/monthlyTrend.vue";
import doctorSurgery from "./components/doctorSurgery.vue";
import patientsNum from "./components/patientsNum.vue";
import reviewReport from "./components/reviewReport.vue";
import surgeryPCI from "./components/surgeryPCI.vue";
import doctorTreat from "./components/doctorTreat.vue";
import S2FMC from "./components/S2FMC.vue";
import FMC2ECG from "./components/FMC2ECG.vue";
import reperfusionRatio from "./components/reperfusionRatio.vue";
import CCU from "./components/CCU.vue";
import DIDO from "./components/DIDO.vue";
import D2B from "./components/D2B.vue";
import D2B2 from "./components/D2B2.vue";
import FMC2B from "./components/FMC2B.vue";
import FMC2W from "./components/FMC2W.vue";
import ECG from "./components/ECG.vue";
import uploadRatio from "./components/uploadRatio.vue";
import PPCI from "./components/PPCI.vue";
import guideTime from "./components/guideTime.vue";
import firstMedical from "./components/firstMedical.vue";
import D2W from "./components/D2W.vue";
import inTime from "./components/inTime.vue";
import timeLine from "./components/timeLine.vue";
import indicatorsAverageTime from "./components/indicatorsAverageTime.vue";
import swallow from "./components/swallow.vue";
import complication from "./components/complication.vue";
import mortality from "./components/mortality.vue";

import axios from "axios";
import md5 from "js-md5";
export default {
  name: "Comprehensive",
  components: {
    patientProfile,
    keyfitTechnology,
    chestpainMap,
    caseChart,
    diseaseTime,
    diseaseTraumaTime,
    qualityIndicators,
    realTime,
    medicalProcess,
    patientChestpain,
    averageMonth,
    reperfusionMeasure,
    surgicalTreatment,
    diagnosisType,
    hospitalizationExpenses,
    monthlyTrend,
    doctorSurgery,
    patientsNum,
    reviewReport,
    surgeryPCI,
    doctorTreat,
    S2FMC,
    FMC2ECG,
    reperfusionRatio,
    CCU,
    DIDO,
    D2B,
    D2B2,
    FMC2B,
    FMC2W,
    ECG,
    uploadRatio,
    PPCI,
    guideTime,
    firstMedical,
    D2W,
    inTime,
    timeLine,
    indicatorsAverageTime,
    swallow,
    complication,
    mortality,
  },
  data() {
    return {
      screenTime: "",
      loading: false,
      isStrock:
        this.$store.getters.hospitalId == 76 ||
        this.$store.getters.hospitalId == 201
          ? "stroke"
          : "chestPain",
      navName: "comper",
      checkNum: 0,
      checkList:
        this.$store.getters.hospitalId == 76 ||
        this.$store.getters.hospitalId == 201
          ? [
              {
                code: "stroke",
                name: "",
                title: "卒中中心数据综合展示",
              },
            ]
          : !(
              this.$store.getters.hospitalId == 76 ||
              this.$store.getters.hospitalId == 201
            ) && this.$store.getters.webcfg.split("|")[1] != "trauma"
          ? [
              {
                code: "chestPain",
                name: "切换卒中",
                title: "胸痛中心数据综合展示",
              },
              {
                code: "stroke",
                name: "切换胸痛",
                title: "卒中中心数据综合展示",
              },
            ]
          : [
              {
                code: "chestPain",
                name: "切换卒中",
                title: "胸痛中心数据综合展示",
              },
              {
                code: "stroke",
                name: "切换创伤",
                title: "卒中中心数据综合展示",
              },
              {
                code: "trauma",
                name: "切换胸痛",
                title: "创伤中心数据综合展示",
              },
              {
                code: "beacon",
                name: "切换信标",
                title: "信标系统综合展示",
              },
            ],
      navList: [
        {
          name: "综合展示",
          label: "comper",
          isShow: true,
          field: ["chestPain", "stroke", "trauma"],
        },
        {
          name: "运营情况",
          label: "operation",
          isShow: false,
          field: ["chestPain", "stroke"],
        },
        {
          name: "医疗质控",
          label: "medicalQualityControl",
          isShow: false,
          field: ["chestPain", "stroke"],
        },
        {
          name: "急救时间",
          label: "firstTime",
          isShow: false,
          field: ["chestPain", "stroke"],
        },
        {
          name: "总览",
          label: "generalView",
          isShow: true,
          field: ["beacon"],
        },
        {
          name: "实时地图",
          label: "realTimeMap",
          isShow: false,
          field: ["beacon"],
        },
      ],
      token: "",
    };
  },
  computed: {
    iframeUrl() {
      return `${window.$CONFIG.Beacon_Url}/localsense/#/SingleModule/index/${
        this.navName == "generalView" ? "home" : "overview"
      }`;
    },
  },
  async mounted() {
    this.getToken();
    setTimeout(() => {
      window.location.reload();
    }, 3600000);
    this.screenTime = format(new Date(), "YYYY-MM-DD HH:mm:ss");
    setInterval(() => {
      this.screenTime = format(new Date(), "YYYY-MM-DD HH:mm:ss");
    }, 1000);
  },
  methods: {
    // 定位信标获取登录
    async getToken() {
      const salt = "abcdefghijklmnopqrstuvwxyz20191107salt";
      const result = await axios({
        method: "post",
        url: window.$CONFIG.Beacon_Url + "/localsense/login",
        headers: {
          "content-type": "application/json",
        },
        data: {
          username: window.$CONFIG.Beacon_Username,
          password: md5(md5(window.$CONFIG.Beacon_Password) + salt),
        },
      });
      this.token = result.data.data;
    },
    initIframe() {
      const iframeId = ("#iframe" + this.navName).replace(/\//g, "\\/");
      const iframe = document.querySelector(iframeId);
      window.addEventListener("message", (e) => {
        if (!e.data.ready) return;
        iframe.contentWindow.postMessage(
          {
            token: this.token,
            username: window.$CONFIG.Beacon_Username,
          },
          "*"
        );
      });
    },
    clickType(item, index) {
      this.navName = item.label;
      this.navList.forEach((el, i) => {
        if (i == index) {
          el.isShow = true;
        } else {
          el.isShow = false;
        }
      });
    },
    skipToHome() {
      this.$router.push({
        name: "patient",
      });
    },
    checkStore() {
      this.checkNum++;
      if (this.$store.getters.webcfg.split("|")[1] != "trauma") {
        if (this.checkNum > 1) {
          this.checkNum = 0;
        }
      } else {
        if (this.checkNum > 3) {
          this.checkNum = 0;
        }
      }
      this.isStrock = this.checkList[this.checkNum].code;
      const item = this.navList.find((item) =>
        item.field.includes(this.isStrock)
      );
      const index = this.navList.findIndex((item) =>
        item.field.includes(this.isStrock)
      );
      this.clickType(item, index);
      if (["generalView", "realTimeMap"].includes(this.navName)) {
        this.$nextTick(() => {
          this.initIframe();
        });
      }
    },
  },
};
</script>
